<template>
  <div class="create-qr-code">
    <span style="color: red">1、请将二维码内容粘贴于下方输入框之中...<br/>2、为保证生成的二维码图片能够正常扫描，请将背景图修改为白色<br/>3、右击图片另存为，即可保存图片</span>
    <br>
    <el-row :span="24">
      <el-col :span="12" :offset="6">
        <el-input
            class="remove-water-text"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="textarea">
        </el-input>
      </el-col>
    </el-row>
    <br>
    <el-row :span="24">
      <el-col :span="4" :offset="6">
        二维码颜色选择：
        <el-color-picker v-model="color" show-alpha />
      </el-col>
      <el-col :span="4">
        二维码背景颜色选择：
        <el-color-picker v-model="backgroundColor" show-alpha />
      </el-col>
      <el-col :span="4">
        <el-upload
            class="avatar-uploader"
            action="api/qiniu/cloud/uploadFile"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" style="height: 32px" class="avatar"/>
          <span v-else>点击此处上传logo图片</span>
        </el-upload>
      </el-col>
    </el-row>
<!--    <el-button class="confirm" type="primary" round @click="createQr">开始解析视频链接</el-button>-->
    <br>
    <vue-qr :text="textarea" :margin="0" :colorDark="color" :colorLight="backgroundColor" :logoSrc="imageUrl" :size="200"></vue-qr>
  </div>
</template>

<script>
import vueQr from 'vue-qr/src/packages/vue-qr.vue'

export default {
  name: "CreateQrCode",
  components: {
    vueQr
  },
  data() {
    return {
      textarea: this.$variable.baseURL,
      imageUrl: '',
      color: '#000',
      backgroundColor: '#fff'
    }
  },
  mounted() {
    this.createQr();
  },
  methods: {
    createQr() {
    },
    handleAvatarSuccess(data){
      console.log(data)
      this.imageUrl = data.data
    },
    beforeAvatarUpload(){

    }
  }
}
</script>

<style scoped>
.create-qr-code {
  text-align: center;
}

#qrCode >>> img {
  margin: 0 auto;
}
.remove-water-text {
  /*margin-bottom: 20px;*/
  margin-top: 20px;
}
.confirm{
  margin-bottom: 50px;
}
</style>
